<template>
  <div>
    <el-form class="loginContainer"
             ref="loginForm"
             :model="loginForm"
             :rules="rules"
             v-loading="loading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
      <h3 class="loginTitle">管理员登录</h3>
      <el-button type="text" @click="toHome">首页</el-button>
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="false"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox class="loginChecked" v-model="checked">记住我</el-checkbox>
        <el-button type="primary" style="width: 100%" @click="login">登录</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      // 表单数据对象
      loginForm: {
        username: '',
        password: '',
      },
      //记住我
      checked: false,
      // 表单验证规则
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      },
      loading: false

    }
  },

  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
         //是否记住密码
          if(this.checked){
            localStorage.setItem("username",this.loginForm.username);
            localStorage.setItem("password",this.loginForm.password);
          }else {
            localStorage.removeItem("username");
            localStorage.removeItem("password");
          }
          this.postRequest(this.$store.state.baseUrl+'/admin/login', {
            username:this.loginForm.username,
            password:this.loginForm.password
          }).then(resp => {
            if(resp){
              let adminToken = resp.obj.token;
              window.sessionStorage.setItem("adminToken",adminToken);
              window.sessionStorage.setItem("userToken","");
              // console.log(this.$qs.parse(resp.obj.user))
              window.sessionStorage.setItem("user",JSON.stringify(resp.obj.user));

              this.$router.push('/manager');
              this.$message({
                type:'success',
                message:'登陆成功'
              })
              this.loading = false;
            }
            this.loading = false;
          })
        } else {
          this.$message.error("请输入所有字段");
          this.loading = false;
          return false;
        }
      });
    },
    toHome(){
      this.$router.push("/");
    }
  },

  mounted() {
    let username = localStorage.getItem("username");
    let password = localStorage.getItem("password");
    if(username){
      this.loginForm.username = username;
      this.checked = true;
    }
    if(password){
      this.loginForm.password = password;
      this.checked = true;
    }

  }

}
</script>

<style scoped>
.loginContainer {
  background-clip: padding-box;
  border-radius: 15px;
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  box-shadow: 0 0 25px #c8c9cc;
  border: 1px solid #8cc5ff;

}

.loginTitle{
  text-align: center;
  font-size: 20px;
  user-select: none;
}

.loginChecked {
  margin: 10px auto 10px auto;
  /*text-align: center;*/
}
</style>
